
/*
老生命周期的问题
（1）component Wil Mount,在ssr中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，
将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。
(2)component Will Receive Props外部组件多次频更新传入多次不同的props，会导致不必要的异步请求
(3)componetn Will update,更新前记录DoM状态，可能会做一些处理，与component Did update相隔时间如果过
长，会导致状态不太信
*/


import React, {Component} from 'react';

class App extends Component {

    state={
        name:'kik'
    }
    //componentWillMount:render之前修改state最后一次
   static getDerivedStateFromProps(nextProps,nextState){
        console.log('getDrivedStateFromProps')
       console.log(nextProps)
       console.log(nextState)
       return{
            //同名会覆盖掉,不同名会留下来
            name:nextState.name.substring(0,1).toUpperCase()+nextState.name.substring(1)
       }
    }
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        name:'xiaoming'
                    })
                }}>click</button>
                app-{this.state.name}
            </div>
        );
    }
}

export default App;